<!--
* Created by Sean on 2017/10/3.
* Bind Bank Card Number
-->
<template>
  <div id="bindBankCard" class="bind-bank-card">
      <div class="row">
        <span class="title">持卡人：</span>
        <input disabled v-model="cardInfo.customerNm" placeholder="请输入真实姓名">
      </div>
      <div class="row">
        <span class="title">身份证：</span>
        <input disabled v-model="cardInfo.certifId" placeholder="请输入身份证">
      </div>
      <div class="row" >
        <div class="radio-box">
          <span class="title">银行卡类型：</span>
          <label @click="cardInfo.cardType = 1">
            <span class="radio" :class="{filled: cardInfo.cardType === 1, outine: cardInfo.cardType !== 1}"></span>
            <span>储蓄卡</span>
          </label>
          <label @click="cardInfo.cardType = 2">
            <span class="radio" :class="{filled: cardInfo.cardType === 2, outine: cardInfo.cardType !== 2}"></span>
            <span>信用卡</span>
          </label>
        </div>
      </div>
      <div class="row">
        <span class="title">手机号码：</span>
        <input disabled v-model="cardInfo.mobile" type="number" placeholder="请输入手机号码">
      </div>
      <div class="row" v-show="cardInfo.cardType === 2" title="有效期：">
        <span class="title">有效期：</span>
        <input v-model="cardInfo.expired" type="number" placeholder="日期格式为年月（例如：1709）">
      </div>
      <div class="row" v-show="cardInfo.cardType === 2" title="CVN2：">
        <span class="title">CVN2：</span>
        <input v-model="cardInfo.cvn2" type="number" placeholder="请输入信用卡背面后3位数字">
      </div>
      <div class="row">
        <span class="title">银行卡账号：</span>
        <input type="number" v-model="cardInfo.accNo" placeholder="请输入银行卡号">
      </div>
      <div class="row sms-row">
        <span class="title">验证码：</span>
        <input class="r-input code-input" type="number" v-model="cardInfo.smsCode" placeholder="请输入验证码" />
        <div class="sms-sended">
          <x-button slot="right" v-if="SMSsended" :disabled="true" type="primary" mini @click.native="getOpenSMS">
            <span>已发送(<countdown value="60" :start="true" @on-finish="SMSsended = false"></countdown>)</span>
          </x-button>
          <x-button slot="right" v-if="!SMSsended" type="primary" mini @click.native="getOpenSMS">发送验证码</x-button>
        </div>
    </div>
      <x-button class="act-btn" type="primary" @click.native="confirm">确定</x-button>
  </div>
</template>
<script>
  export default {
    name: 'bindBankCard',
    data () {
      return {
        SMSsended: false,
        cardInfo: {
          cardType: 1, // 1.借记卡，2信用卡
          customerNm: JSON.parse(window.localStorage.getItem('userInfo')).trueName, // 真实名字
          mobile: JSON.parse(window.localStorage.getItem('userInfo')).mobile,
          expired: '', // 信用卡有效期
          cvn2: '', // 信用卡后4位
          accNo: '', // 卡号
          certifId: JSON.parse(window.localStorage.getItem('userInfo')).idCard, // 身份证号
          smsCode: '' // 验证码
        }
      }
    },
    methods: {
      confirm () {
        if (!this.validateForm()) return false
        this.$axiosPosting(this.$api.openAccount, this.cardInfo).then(res => {
          if (res.code === '0000') {
            this.$vux.toast.text('绑定成功')
            this.$router.go(-1)
          } else {
            this.$vux.toast.text('绑定失败')
          }
        })
      },
      getOpenSMS () {
        console.log(this.cardInfo.accNo.length)
        if (this.cardInfo.accNo.length < 16) {
          this.$vux.toast.text('银行卡号不正确')
          return false
        }
        this.SMSsended = true
        this.$axiosPosting(this.$api.openSms, {
          accNo: this.cardInfo.accNo,
          mobile: this.cardInfo.mobile
        }).then(res => {
          if (res.code === '0000') {
            this.SMSsended = true
            this.$vux.toast.text('验证码已发送')
          } else {
            this.$vux.toast.text('验证码发送失败')
          }
        })
      },
      validateForm () {
        let ct = this.cardInfo
        if (ct.customerNm === '') {
          this.$vux.toast.text('持卡人不能为空')
          return false
        }
        if (ct.accNo === '') {
          this.$vux.toast.text('卡号不能为空')
          return false
        }
        if (ct.cardType === 2 && ct.expired === '') {
          this.$vux.toast.text('信用卡有效期不能为空')
          return false
        }
        if (ct.cardType === 2 && ct.cvn2 === '') {
          this.$vux.toast.text('信用卡后4位不能为空')
          return false
        }
        if (ct.smsCode === '') {
          this.$vux.toast.text('验证码不能为空')
          return false
        }
        return true
      }
    }
  }
</script>
<style lang="less">
  .bind-bank-card {
    padding: 0 18px;
    font-size: 15px;
    .row {
      height: 54px;
      line-height: 54px;
      position: relative;
    }
    input {
      height: 30px;
      line-height: 30px;
      border: 0;
      outline: 0;
      font-size: 15px;
      width: ~"calc(100% - 104px)";
      padding-left: 4px;
      box-sizing: border-box;
          background: #ffffff;
    color: #999;
    }
    .code-input {
      width: 130px;
    }
    .row::after {
      content: " ";
      width: 100%;
      border-bottom: 1px solid #D9D9D9;
      color: #D9D9D9;
      display: block;
    }
    .title {
      display: inline-block;
      width: 98px;
    }
    .radio {
      display: inline-block;
      border-radius: 100%;
      box-sizing: border-box;
      position: relative;
      margin-right: 4px;
      line-height: 24px;
      border: 1px solid #a39a9a;
      top: 3px;
    }
    .filled {
      width: 18px;
      height: 18px;
      padding: 2px;
      background: #29c429 content-box;
    }
    .outine {
      width: 17px;
      height: 17px;
      background: #dadada border-box;
    }
    .act-btn {
      margin-top: 2.25rem;
    }
    .r-input {
      // display: inline-block;
    }
    .sms-sended {
      display: inline-block;
      float: right;
      position: absolute;
      right: 0;
      top: 0;
      .weui-btn_mini {
        min-width: 5rem;
        font-size: .7rem;
        line-height: 2.18;
      }
    }
  }
</style>
